// 引入 css 样式
import './index.css';
// 引入 Jquery
import YourComponent from '../../../components/NavBar/NavBar';
// 引入 axios 封装的方法
import {getBanners,getShoppingType,getShoppingList,ShoppingList} from '../../../api/admin';

// 引入 hooks
import React,{useEffect,useState,} from 'react';
// 引入路由方法
import {useNavigate} from 'react-router-dom';
// 引入轮播图
import { Carousel } from 'antd';
// 引入 store2
import store from 'store2';

import {FC} from 'react';

interface HomeProps{};

const Home:FC<HomeProps>=()=>{

  // 定义空数组存储轮播图
  interface BannerProps {
    id: number;
    link: string;
  }
  const [banner, setBanner] = useState<BannerProps[]>([]);

  // 定义空数组存储商品分类
  interface ShoppingTypeProps {
    id: number;
    coverImage: string;
    name:string,
  }
  const [shoppingType, setshoppingType] = useState<ShoppingTypeProps[]>([]);

  // 定义空数组存储商品列表
  interface ShoppingListProps{
    id:number,
    coverImage:string,
    name:string,
    price:number,
  }
  const [shoppingList, setshoppingList] = useState<ShoppingListProps[]>([]);
  
  
  useEffect(()=>{
    getBanners().then(res=>{
      setBanner(res.data.data);
    })

    getShoppingType().then(res=>{
      setshoppingType(res.data.data);
    })
   
    // get 请求参数
    const Shopping:ShoppingList={
      page:1,
      per:12,
    }
    getShoppingList(Shopping).then(res=>{
      console.log(res);
      setshoppingList(res.data.data);
      
    })
  },[]);

  // 点击跳转详情的函数
  const navigate=useNavigate();
 
  const jump=(e:number)=>{
    store.set('shoppingId',e);
    navigate('/list');
    
  }
    return(
        <>
          <div className="Home">
              {/* 搜索栏 */}
              <YourComponent />
              {/* 轮播图 */}
              <Carousel autoplay>
                {
                  banner.map(item=><img src={item.link} key={item.id} />)
                }
              </Carousel>
              {/* 商品分类 */}
              <div className="shoppingType">
                <ul>
                  {
                    shoppingType.map(item=><li key={item.id}><img src={item.coverImage} alt="" /><p>{item.name}</p></li>)
                  }
                </ul>
              </div>
              {/* 猜你喜欢 */}
             
              <div className="like">
                <p>猜你喜欢</p>
                <ul>
                  {
                    shoppingList.map(item=><li key={item.id} onClick={()=>jump(item.id)}><img src={item.coverImage} alt="" /><span>{item.name}</span><p>￥ {item.price}</p></li>)
                  }
                </ul>
              </div>
           
              
          </div>
        </>
    )
}

export default Home;